<template>
<view class="order-item">
  <view class="left">
    <view class="name-status">
      <up-tag :text="orderItem.tagText" :type="orderItem.tagType" size="mini"/>
      <text class="order-name">
        {{ orderItem.orderItemName }}
      </text>
      <view v-if="orderItem.showDot" class="red-tips"/>
    </view>
    <view class="order-info">
      <view class="order-info-price">
        <text>订单金额:</text>
        <text>
          {{ orderItem.orderItemPrice }}
        </text>
      </view>

      <view class="order-info-time">
        <text>订单时间:</text>
        <text>
          {{ orderItem.orderItemTime }}
        </text>
      </view>
    </view>
  </view>
    <up-checkbox-group
        v-if="showCheckBox"
        class="checkbox"
        v-model="orderCheckedVal"
        :iconSize="rpx2px(30)"
        @change="handleCheckedChange"
    >
      <up-checkbox
          :size="rpx2px(80)"
          shape="square"/>
    </up-checkbox-group>
</view>
</template>
<script setup>
import {defineProps,ref,defineEmits} from 'vue'
import {rpx2px} from "@/utils/utils";
const props = defineProps({
  orderItem: {
    type: Object,
    default:() =>  {
      return {
        tagText: '',
        tagType: 'info',
        orderItemName: '',
        orderItemPrice: '',
        orderItemTime: '',
        showDot: false
      }
    }
  },
  showCheckBox: {
    type: Boolean,
    default: false
  }
})
const orderCheckedVal = ref([])
const emits = defineEmits(['checkedChange'])
const handleCheckedChange = val => {
  const curOrderItem = Object.assign(props.orderItem, {payChecked: !!val.length})
  emits('checkedChange',curOrderItem)
}
</script>
<style scoped lang=less>
@import "style/order-item";
</style>
